<template>
  <div class="status-monitor-page">
    <!-- 这一部分看能不能合并到另一页 -->
    <el-row type="flex" justify="start" align="middle" class="header-nav">
      <!-- 状态监测 -->
      <el-col :span="2">
        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link" :class="{ 'active-tab': selectedTab === 'pressure-monitor' }" @click="setActiveTab('pressure-monitor')">
            状态监测
          </span>
          <template v-slot:dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="pressure-monitor">压头监测</el-dropdown-item>
              <el-dropdown-item command="bucket-monitor">桶罩及桶罩驱动缸监测</el-dropdown-item>
              <el-dropdown-item command="center-punch-monitor">对中穿孔装置监测</el-dropdown-item>
              <el-dropdown-item command="small-car-monitor">装卸载小车监测</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <!-- <span class="el-dropdown-link" :class="{ 'active-tab': selectedTab === 'fault-diagnosis' }" @click="setActiveTab('fault-diagnosis')">
            预警管理
        </span> -->
      </el-col>

      <!-- 预警管理 -->
      <!-- <el-col :span="2">
        <span class="el-dropdown-link" @click="handleCommand('fault-diagnosis')" >
          预警管理
        </span> -->
      <!--      FIXME:bug-->
<!--      <el-col :span="2">-->
<!--        <span class="el-dropdown-link" :class="{ 'active-tab': selectedTab === 'fault-diagnosis' }" @click="setActiveTab('fault-diagnosis')">-->
<!--            预警管理-->
<!--        </span>-->
<!--      </el-col>-->
    </el-row>


    <!-- 内容区域 -->
    <el-row type="flex" justify="space-between" class="content-area">
      <el-col :span="24">
        <div v-if="selectedTab === 'pressure-monitor'">
          <pressure-monitor />
        </div>
        <div v-else-if="selectedTab === 'bucket-monitor'">
          <bucket-monitor />
        </div>
        <div v-else-if="selectedTab === 'center-punch-monitor'">
          <center-punch-monitor />
        </div>
        <div v-else-if="selectedTab === 'small-car-monitor'">
          <small-car-monitor />
        </div>
        <!-- 新增的预警管理页面 -->
        <div v-else-if="selectedTab === 'fault-diagnosis'">
          <fault-diagnosis />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import PressureMonitor from '@/views/Dashboard.vue';
import BucketMonitor from '@/views/BucketMonitor.vue';
import CenterPunchMonitor from '@/views/CenterPunchMonitor.vue';
import SmallCarMonitor from '@/views/SmallCarMonitor.vue';
import FaultDiagnosis from '@/views/Alarm/alarmPage.vue';

export default {
  name: 'StatusMonitorPage',
  components: {
    PressureMonitor,
    BucketMonitor,
    CenterPunchMonitor,
    SmallCarMonitor,
    FaultDiagnosis,
  },
  data() {
    return {
      selectedTab: 'pressure-monitor', // 默认选中
    };
  },
  methods: {
    handleCommand(command) {
      this.selectedTab = command;
    },
    setActiveTab(tab) {
      this.selectedTab = tab;
    }
  },
};
</script>

<style scoped>
.status-monitor-page {
  background-color: #000C34;
  min-height: 100vh;
  color: #C0C4CC;
  padding: 0;
}

.header-nav {
  transform: translateY(-10px); /* 根据需要调整数值 */
  height: 60px;
  background-color: #000C34;
  padding: 0 20px;
  color: #4bc3ec;
  /* display: flex; */
  align-items: center; /* 确保所有内容在垂直方向上居中 */
  border-bottom: 1px solid #0062ff;
  width:94vw;
  top:0.5vw;
}

.el-dropdown-link {
  font-size: 15px;
  cursor: pointer;
  color: #4bc3ec;
  width: 100px; /* 根据实际情况设置合适宽度，如果想自适应可以设置为 auto 或不设置宽度属性 */
  height: 30px; /* 根据实际情况设置合适高度，如果想自适应可以设置为 auto 或不设置高度属性 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.el-dropdown-menu {
  background-color: #000C34;
  color: #4bc3ec;
}

:deep(.el-dropdown-menu__item ) {
  color:white;
}
.content-area {
  padding: 0;
  background-color: #000C34;
}

.dashboard {
  padding: 20px;
}
:deep(.data-table-container[data-v-ce52ce89]) {
  padding: 0;
}

.status-monitor-page[data-v-7e64e9c3] {
  background-color: #000C34;
  min-height: 100vh;
  padding: 0 20px;
  color: #C0C4CC;
}

.active-tab {
  background-color: #0062ff!important;
  height: 30px;
  width: 100px;
  align-items: center; /* 确保所有内容在垂直方向上居中 */
  /* justify-content: center; */
  color:white;
  display: flex;
  text-align: center; /* 水平居中文本 */
  line-height: 30px; /* 垂直居中文本 */
}

.el-dropdown {
  display: flex;
  text-align: center; /* 水平居中文本 */
  line-height: 30px; /* 垂直居中文本 */
}
</style>
